<template>
    <div class="page-recommend">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="myMall-bodyer">
          <div class="adv-show">
            <van-swipe :autoplay="3000" indicator-color="#2864d9">
              <van-swipe-item v-for="(item, key) in userInfo.carouselArr" :key="key" >
                <img :src="item.bannerUrl"  class="advertising">
                
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="chooseDepartment">
            <div>
              <div><i class="iconfont icon-zuichun oneChoose"></i><p>美妆护肤</p></div>
              <div><i class="iconfont icon-shoubiao twoChoose"></i><p>名品腕表</p></div>
              <div><i class="iconfont icon-jiajujiafang threeChoose"></i><p>超值百货</p></div>
              <div><i class="iconfont icon-lv_zuanshi fourChoose"></i><p>名品腕表</p></div>
              <div><i class="iconfont icon-gouwuche fiveChoose"></i><p>时尚箱包</p></div>
            </div>
          </div>
          <div class="chooseRush">
            <div><i><img src="../../assets/tubiao/aaa.png" /></i></div>
            <div><i><img src="../../assets/tubiao/bbb.png" /></i></div>
          </div>
          <div class="limTimeSeconds">
            <div class="limTimeTitle">
              <span class="headline">限时秒杀</span>
              <span class="countDown">距结束还有</span>
              <div class="countBack">
                <div class="countTime">{{dataTime.h}}</div><span>:</span>
                <div class="countTime">{{dataTime.m}}</div><span>:</span>
                <div class="countTime">{{dataTime.s}}</div>
              </div>
            </div>
            <div class="commodity">
              <ul>
                <li v-for="(items, key) in userInfo.seckillArr" :key="key">
                  <img :src="items.prodImage[1]" />
                  <div class="discount">券后价</div>
                </li>
              </ul>
            </div>
          </div>
          <p class="activitTitle">精选活动</p>
          <div class="selectActivit">
            <div class="activitContent">
              <div class="activity">
                <img src="../../assets/tubiao/ddd.png"/></div>
              <div class="selectedItem"  v-for="(item, key) in userInfo.beautyArr" :key="key">
                <div class="itemImg" @click="fsToproduct(key)"><img :src="item.prodImage[1]" /><div class="discount">券后价</div></div>
                <p class="currentPrice">￥{{item.currentPrice}}<span class="originalCost">￥{{item.originPrice}}</span></p>
              </div>
            </div>
          </div>
          <div class="recommendtTo">
            <p class="recommendTitle">为你推荐</p>
            <div class="recommengContent">
              <ul>
                <li v-for="(item, key) in userInfo.recommendToYou" :key="key"  @click="merchandiseNews(key)">
                  <div class="proExhibit">
                   <img :src= "item.prodImage[0]" />
                  </div>
                  <p class="productTitle">{{item.prodSupTitle}}</p>
                  <div class="coupon">券后价</div><span class="todayPrice">￥{{item.currentPrice}}</span>
                  <p class="originCost">原价： ￥{{item.originPrice}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
</template>

<script>
export default {
    name: 'page-recommend',
    data () {
      return {
        isLoading: false,
        isRefeshed:true,
        imageURL: [],
        dataTime: {
          h: '',
          m: '',
          s: '',
        },
        times: 0,
        objTim: null,
        userInfo:{
          carouselArr: [],
          seckillArr: [],
          beautyArr: [],
          recommendToYou: [],
        }
      }
    },
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
          this.count++;
        }, 1000);
      },
      myShowTime() {
        let h = parseInt(this.times/60/60);
        let m = parseInt(this.times/60)%60;
        let s = this.times%60;
        h < 10 ? (this.dataTime.h = '0' + h) : (this.dataTime.h = h);
        m < 10 ? (this.dataTime.m = '0' + m) : (this.dataTime.m = m);
        s < 10 ? (this.dataTime.h = '0' + s) : (this.dataTime.s = s);
        this.times --;
      },
      merchandiseNews(key) {
        this.$router.push({name: 'commodity-property', params: {fsInfos: this.userInfo.recommendToYou[key]}})
      },
      fsToproduct(key) {
        this.$router.push({name: 'commodity-property', params: {fsInfos: this.userInfo.beautyArr[key]}})
      }
    },
    created() {

      this.$http.all([
        this.$request.getprod({
          prodCategory: 'department',
          prodSubClass: 'waterCup',
          startIndex:0,
          count: 3
        }),
        this.$request.banner(),
        this.$request.getSeckill({count:5}),
        this.$request.getRecommend(),
      ])
        .then(this.$http.spread((Commodity, acct, prems, recommend) => {
          if(Commodity.data.code === 10100) {
            // console.log(Commodity);
            this.userInfo.beautyArr = Commodity.data.data;
          }
          if (acct.data.code === 10020) {
            // console.log(acct);
            this.userInfo.carouselArr = acct.data.data;
          }
          if (recommend.data.code === 1) {
            this.userInfo.recommendToYou = recommend.data.data;
            // console.log(recommend);
          }
          if (prems.data.code === 10040) {
            // console.log(prems);
            this.userInfo.seckillArr = prems.data.data;
          }
        }));
      let data = new Date();
      let hours = data.getHours();
      let minutes = data.getMinutes();
      let seconds = data.getSeconds();
      hours = 24 - hours - 1;
      minutes = 60 - minutes;
      seconds = 60 - seconds;
      this.times = (hours * 60 + minutes) * 60;
      if (this.objTim === null) {
        this.objTim = setInterval(this.myShowTime, 1000);
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../assets/font_1001665_wneao7ah2ln/iconfont.css";
  *{
    margin: 0;
    padding: 0;
  }
  .myMall-bodyer{
    margin: 107.5px 0;
    overflow: hidden;
  }
  .advertising{
    width: 100vw;
    height: 25vh;
  }
  .chooseDepartment{
    width: 100vw;
    height: 150px;
    background: white;
    padding-top: 10px;
  }
  .chooseDepartment>div>div{
    width: 20%;
    float: left;
    box-sizing: border-box;
    text-align: center;
  }
  .chooseDepartment>div>div>i{
    font-size: 45px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: block;
    margin: auto;
    line-height: 80px;
    text-align: center;
    color: white;
  }
  .oneChoose{
    background: linear-gradient(left bottom, #ef959a,#d661e8);
  }
  .twoChoose{
    background: linear-gradient(left bottom, #f3b979,#ef9456);
  }
  .threeChoose{
    background: linear-gradient(left bottom, #ef9585,#ea6a54);
  }
  .fourChoose{
    background: linear-gradient(left bottom, #7c7bf6,#5753f5);
  }
  .fiveChoose{
    background: linear-gradient(left bottom, #977af6,#9f59f3);
  }
  .chooseDepartment>div>div>p{
    font-size: 20px;
    line-height: 20px;
    margin-top: 20px;
  }
  .chooseRush{
    width: 100vw;
    height: 18vh;
    background: white;
  }
  .chooseRush>div{
    width: 50%;
    height: 130px;
    float: left;
    box-sizing: border-box;
  }
  .chooseRush>div>i{
    display: block;
    width: 45vw;
    height: 15vh;
    margin: 0 auto;
    border-radius: 18px;
  }
  .chooseRush>div>i>img{
    width: 45vw;
    height: 15vh;
  }
  .limTimeSeconds{
    margin-top: 10px;
    width: 100vw;
    height: 280px;
    /*background: white;*/
  }
  .limTimeTitle{
    width: 100vw;
    height: 80px;
    /*line-height: 80px;*/
    background: white;
    position: relative;
  }
  .headline{
    position: absolute;
    top: 20px;
    left: 25px;
    font-size: 25px;
  }
  .countBack{
    position: absolute;
    top: 20px;
    right: 18px;
  }
  .countBack>span{
    margin-left: 5px;
  }
  .countDown{
    position: absolute;
    top: 24px;
    right: 160px;
    font-size: 18px;
    height: 30px;
  }
  .countTime{
    width: 30px;
    height: 30px;
    color: white;
    background: #468cf6;
    display: inline-block;
    font-size: 24px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    /*margin-left: 5px;*/
  }
  .commodity{
    width: 100vw;
    height: 280px;
    overflow: hidden;
    overflow-x: auto;
    &::-webkit-scrollbar{         //清除滚动条
      display: none;
    }
  }
  .commodity>ul{
    display: flex;
    margin-top: 10px;
  }
  .commodity>ul>li{
    width: 160px;
    float: left;
    height: 190px;
    margin-left: 20px;
    position: relative;
    background: white;
    box-shadow: #cfcfcf 0 0 10px;
  }
  .commodity>ul>li>img{
    width: 160px;
    height: 150px;
  }
  .discount{
    position: absolute;
    bottom: 0;
    left: 20px;
    font-size: 20px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 20px;
    color: white;
    background: #458df7;
  }
  .selectActivit{
    width: 100vw;
    overflow: hidden;
    background: white;
  }
  .activity{
    width: 93vw;
    height: 9vh;
    margin: auto;
  }
  .activity>img{
    width: 93vw;
    height: 9vh;
  }
  .activitTitle{
    width: 100vw;
    height: 80px;
    line-height: 80px;
    background: white;
    font-size: 25px;
    padding-left: 20px;
    margin-top: 15px;
  }
  .selectedItem{
    width: 33.3333%;
    height: 250px;
    float: left;
    background: white;
    padding-top: 30px;
    position: relative;
  }
  .itemImg{
    width: 25vw;
    height: 190px;
    margin: auto;
    background: white;
    position: relative;
  }
  .itemImg>img{
    width: 160px;
    height: 150px;
  }
  .currentPrice{
    position: absolute;
    bottom: 30px;
    left: 20px;
    font-size: 20px;
  }
  .originalCost{
    font-size: 16px;
    color: #b9b9b9;
    margin-left: 20px;
  }
  .recommendtTo{
    width: 100vw;
    overflow: hidden;
  }
  .recommendTitle{
    width: 100vw;
    height: 80px;
    line-height: 80px;
    background: white;
    font-size: 25px;
    padding-left: 20px;
    margin-top: 20px;
  }
  .recommengContent{
    width: 100vw;
    background: white;
  }
  .recommengContent>ul>li{
    position: relative;
    height: 200px;
    width: 100vw;
    background: #fff;
  }
  .proExhibit{
    height: 180px;
    width: 180px;
    position: absolute;
    top: 20px;
    left: 10px;
  }
  .proExhibit>img{
    width: 180px;
    height: 180px;
  }
  .productTitle{
    width: 380px;
    height: 80px;
    position: absolute;
    top: 40px;
    left: 220px;
    font-size: 23px;
  }
  .coupon{
    position: absolute;
    top: 105px;
    left: 220px;
    font-size: 20px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 20px;
    color: white;
    background: #458df7;
  }
  .todayPrice{
    position: absolute;
    top: 110px;
    left: 320px;
    color: #5297f9;
    font-size: 20px;
  }
  .originCost{
    position: absolute;
    top: 165px;
    left: 230px;
    color: #a0a0a0;
    font-size: 18px;
  }
</style>
